<template>
  <div id="app">
    <div class="common-layout">
      <el-container>
        <el-header class="head">创建合同信息</el-header>
        <el-main>
          <div class="main-top">
            <span class="btl">合同基本信息</span>
            <span class="btr">注：带有“*”必填项</span>
          </div>
        </el-main>

        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="合同名称" prop="name">
            <el-input class="htmipt" />
          </el-form-item>
          <el-form-item label="机构名称" prop="name">
            <el-input class="htmipt1" />
            <el-button type="info">查询</el-button>
          </el-form-item>

          <el-form-item label="购买产品类别" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="博看专区" name="type" />
              <el-checkbox label="手机APP" name="type" />
              <el-checkbox label="微刊" name="type" />
              <el-checkbox label="触摸屏" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="服务方式" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="镜像" name="type" />
              <el-checkbox label="远程" name="type" />
              <el-checkbox label="馆外用户名" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="资源范围" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="全选" name="type" />
              <el-checkbox label="期刊" name="type" />
              <el-checkbox label="报纸" name="type" />
              <el-checkbox label="图书" name="type" />
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="合同性质" prop="region">
            <el-select v-model="ruleForm.region" placeholder="新增">
              <el-option label="新增" value="新增" />
              <el-option label="正式" value="正式" />
              <el-option label="意向" value="意向" />
              <el-option label="已签" value="已签" />
              <el-option label="续约" value="续约" />
            </el-select>
          </el-form-item>

          <el-form-item label="合同类型" prop="httype" required="true">
            <el-select v-model="ruleForm.httype" placeholder="销售">
              <el-option label="销售" value="销售" />
              <el-option label="审核中" value="审核中" />
            </el-select>
          </el-form-item>

          <el-form-item label="合同经办人" required="true" prop="jbrname">
            <el-input class="htmipt" />
          </el-form-item>

          <el-form-item label="合同联系人" required="true" prop="lxrname">
            <el-input class="htmipt" />
          </el-form-item>

          <el-form-item label="合同总金额" required="true" prop="htzmoney">
            <el-input class="htmipt" /> 元
          </el-form-item>

          <el-form-item label="付款方式" prop="fknethods" required="true">
            <el-select v-model="ruleForm.fknethods" placeholder="一次性付款">
              <el-option label="一次性付款" value="一次性付款" />
              <el-option label="按年支付" value="按年支付" />
              <el-option label="分期付款" value="分期付款" />
            </el-select>
          </el-form-item>

          <el-form-item required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="ruleForm.date1"
                  type="date"
                  label="Pick a date"
                  placeholder="年/月/日"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            前支付
          </el-form-item>

          <el-form-item label="签约日期" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="ruleForm.date1"
                  type="date"
                  label="Pick a date"
                  placeholder="年/月/日"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="合同期限">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="ruleForm.date1"
                  type="date"
                  label="Pick a date"
                  placeholder="年/月/日"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">至</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="ruleForm.date1"
                  type="date"
                  label="Pick a date"
                  placeholder="年/月/日"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="负责代理" prop="name">
            <el-input class="htmipt" placeholder="代理机构名称" />
          </el-form-item>

          <div class="main-top">
            <span class="btl">合同相关信息</span>
          </div>

          <el-form-item label="博看签字人" prop="name">
            <el-input class="htmipt" />
          </el-form-item>

          <el-form-item label="博看盖章签字" prop="name" required>
            <el-input class="htmipt" placeholder="公司名称" />
          </el-form-item>

          <el-form-item label="机构签字人" prop="name" required>
            <el-input class="htmipt" />
          </el-form-item>

          <el-form-item label="机构盖章签字" prop="name" required>
            <el-input class="htmipt" placeholder="机构客户名称" />
          </el-form-item>

          <el-form-item label="备注" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>

          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :on-change="handleChange"
          >
            <el-form-item label="合同扫描件" prop="shzt">
              <el-button type="primary">选择文件</el-button>
              注：上传纸质合同扫描件，图片格式：JPG或PNG，PDF ，文件大小规定2M
            </el-form-item>
          </el-upload>

          <el-form-item label="审核状态" prop="shzt">
            <el-select v-model="ruleForm.httype" placeholder="未审核">
              <el-option label="未审核" value="未审核" />
              <el-option label="审核中" value="审核中" />
              <el-option label="已审核" value="已审核" />
            </el-select>
            <el-button type="info">取消</el-button>
          </el-form-item>

          <el-form-item label="合同到期提醒" prop="shzt">
            <el-radio-group v-model="radio">
              <el-radio :label="3">开启</el-radio>
              <el-radio :label="6">关闭</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-row class="mb-4">
            <el-button type="primary">确定编辑</el-button>
             <el-button type="info">取消</el-button>
          </el-row>
        </el-form>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const radio = ref(3);
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  // name: 'Hello',
  region: "",
  count: "",
  date1: "",
  date2: "",
  httype: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
  jbrname: "",
  lxrname: "",
  htzmoney: "",
  fknethods: "",
  shzt: "",
});

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style scoped>
.head {
  text-align: center;
  font-weight: bolder;
}
.main-top {
  height: 40px;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid gainsboro;
  /* background-color: aqua; */
}
.btl {
  font-weight: bold;
}
.btr {
  color: gray;
}
.htmipt {
  width: 300px;
}
.htmipt1 {
  width: 400px;
}

.mb-4 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: aqua; */
}
</style>
